<template>
  <div>
    <!-- 头部 -->
    <div id="top1">
      <h2>商品分类</h2>
      <p>
        <span class="iconfont">&#xe64a;</span>
        <span class="iconfont">&#xe614;</span>
        <i class="line"></i>
      </p>
      <input type="text" name="usename" placeholder="请输入关键字" />
      <b class="iconfont">&#xe626;</b>
    </div>
    <!-- 内容区 -->
    <main>
      <div class="left">
        <h2>本周特惠</h2>
        <ul>
          <li
            v-for="(item, index) in sortList"
            :key="item.id"
            @click="changes(index)"
            :class="index == sum ? 'cur' : ''"
          >
            {{ item.catename }}
          </li>
        </ul>
      </div>
      <div class="right">
        <div class="right_box1">
          <h2>热门精选</h2>
          <ul>
            <li
              @click="goodsto(item.id)"
              v-for="item in secondList"
              :key="item.id"
            >
              <img :src="$pre + item.img" alt="" />
              <p>{{ item.catename }}</p>
            </li>
          </ul>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      sum: 0,
    };
  },
  computed: {
    ...mapGetters({
      sortList: "sort/list",
      secondList: "sort/secondlist",
    }),
  },
  methods: {
    ...mapActions({
      reqSortlist: "sort/reqchangelist",
      reqSortsecondlist: "sort/reqsecondlist",
    }),
    goodsto(id) {
      this.$router.push("/goods?type=2&id=" + id);
    },
    changes(index) {
      (this.sum = index), this.reqSortsecondlist(index);
    },
  },
  mounted() {
    this.reqSortlist();
  },
};
</script>

<style scoped>
body,
html {
  height: 100vh;
}
body {
  display: flex;
  flex-direction: column;
  max-width: 7.5rem;
  margin: 0 auto;
}
#top1 {
  height: 1.64rem;
  padding: 0.32rem 0.12rem 0.32rem 0.34rem;
  background: #ff6640;
}
#top1 h2 {
  width: 1.4rem;
  height: 0.34rem;
  font-size: 0.32rem;
  line-height: 0.64rem;
  text-align: center;
  color: #ffdfd8;
  margin-top: 0.1rem;
  margin-left: 3rem;
}
#top1 p {
  width: 1.74rem;
  height: 0.6rem;
  border: 1px solid #ff8a6f;
  box-sizing: border-box;
  border-radius: 0.54rem;
  display: flex;
  position: relative;
  margin-top: -0.44rem;
  margin-left: 5.3rem;
}
#top1 p span {
  width: 50%;
  height: 100%;
  text-align: center;
  line-height: 0.64rem;
}
#top1 p .line {
  width: 1px;
  height: 0.37rem;
  background: #ff896e;
  position: absolute;
  top: 0.12rem;
  left: 0.86rem;
}
#top1 input {
  display: block;
  width: 6rem;
  height: 0.65rem;
  border: 0.02rem solid #e6e6e6;
  border-radius: 0.05rem;
  box-sizing: border-box;
  font-size: 0.26rem;
  color: #999;
  margin: 0.4rem 0.2rem 0.2rem 0.45rem;
  padding-left: 0.5rem;
}
#top1 b.iconfont {
  font-size: 0.32rem;
  color: #999;
  vertical-align: top;
  position: absolute;
  left: 0.85rem;
  top: 1.46rem;
}
main {
  background: #f2f2f2;
}
main .left {
  float: left;
  width: 2.35rem;
  background: #fff;
  padding-bottom: 2.2rem;
}
main .left h2 {
  text-align: center;
  padding: 0.1rem 0 0.1rem 0;
}
main .left ul li {
  width: 2.35rem;
  height: 1.15rem;
  font-size: 0.26rem;
  text-align: center;
  line-height: 1.15rem;
}
main .left ul li a {
  display: block;
  width: 2.35rem;
  height: 1.15rem;
  color: #999;
  line-height: 1.15rem;
}
main .left ul li.cur {
  font-size: 0.3rem;

  color: #ff6040;
  font-weight: bold;
}
main .left ul li:hover {
  background: #ff6040;
  color: #fff;
}
main .right {
  width: 4.64rem;
  float: left;
  margin: 0.3rem 0.2rem 0 0.3rem;
  background-color: #fff;
}
main .right .right_box1 {
  height: 4.36rem;
  margin-bottom: 0.3rem;
  padding: 0.22rem 0.2rem 0.22rem 0.2rem;
  box-sizing: border-box;
}
main .right .right_box1 h2 {
  font-size: 0.3rem;
  font-weight: bold;
  margin-bottom: 0.2rem;
  color: #333;
}
main .right .right_box1 ul {
  width: 4.24rem;
  height: 3.42rem;
}
main .right .right_box1 li {
  width: 1.28rem;
  height: 1.6rem;
  margin-right: 0.2rem;
  float: left;
  text-align: center;
  margin-bottom: 0.2rem;
}
main .right .right_box1 li:nth-child(3) {
  margin-right: 0;
}
main .right .right_box1 li:nth-child(4),
main .right .right_box1 li:nth-child(5) {
  margin-bottom: 0;
}
main .right .right_box1 li img {
  width: 100%;
}
main .right .right_box1 li p {
  color: #999;
  font-size: 0.22rem;
  margin-top: 0.1rem;
  line-height: 0.22rem;
}
</style>